<template>
  <el-container id="Error">
    <div class="left">
      <img :src="url" alt="" />
    </div>
    <div class="right">
      <h1>无法连接服务器</h1>
      <p>心之所向</p>
      <p>有些繁忙</p>
      <p>喝杯水休息一下吧</p>
      <p>当然，你还可以</p>
      <p><el-button type="default" round @click="goback">回去再试试</el-button></p>
    </div>
  </el-container>
</template>

<script>
export default {
  data: () => ({
    url: ''
  }),
  methods: {
    goback() {
      this.$router.go(-1)
    }
  },
  created() {
    this.url = require('../../assets/images/error/error.jpg')
  }
}
</script>

<style lang="scss" scoped>
#Error {
  width: 97%;
  height: 95%;
  background-color: rgba(255, 255, 255, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1rem;
  overflow: hidden;

  .left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    img {
      width: auto;
      height: 100%;
    }
  }

  .right {
    flex: 1;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: center;

    h1{
      font-size: 3rem;
    }

    p{
      width: 100%;
      line-height: 2;
      font-size: 2rem;
      text-shadow: 0 0 0.1rem lightblue;
    }
  }
}
</style>
